&lt;template>
  &lt;div class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-50">
    &lt;div class="bg-white w-full max-w-md rounded-t-2xl p-4 max-h-[80vh] overflow-y-auto">
      &lt;div class="flex justify-between items-center mb-4">
        &lt;h3 class="text-lg font-semibold">评论 {{ videoStore.currentVideo?.comment_num || 0 }}&lt;/h3>
        &lt;button @click="$emit('close')" class="text-gray-500">
          &lt;i class="fas fa-times">&lt;/i>
        &lt;/button>
      &lt;/div>

      &lt;div class="mb-4">
        &lt;div class="flex gap-2">
          &lt;textarea
            v-model="commentContent"
            rows="2"
            class="flex-1 p-2 border rounded-lg resize-none"
            placeholder="写下你的评论..."
          >&lt;/textarea>
          &lt;button
            @click="handleSubmitComment"
            :disabled="!commentContent.trim() || submitting"
            class="px-4 py-2 bg-primary text-white rounded-lg disabled:opacity-50"
          >
            发送
          &lt;/button>
        &lt;/div>
      &lt;/div>

      &lt;div v-if="videoStore.commentsLoading" class="py-4 text-center">
        加载中...
      &lt;/div>

      &lt;div v-else-if="videoStore.currentComments.length === 0" class="py-4 text-center text-gray-500">
        暂无评论
      &lt;/div>

      &lt;div v-else class="space-y-4">
        &lt;div
          v-for="comment in videoStore.currentComments"
          :key="comment.id"
          class="flex gap-3"
        >
          &lt;img
            :src="comment.author_avatar"
            :alt="comment.author_name"
            class="w-8 h-8 rounded-full"
          />
          &lt;div class="flex-1">
            &lt;div class="flex justify-between items-start">
              &lt;div>
                &lt;p class="font-semibold">{{ comment.author_name }}&lt;/p>
                &lt;p class="text-sm text-gray-500">{{ formatTime(comment.created_at) }}&lt;/p>
              &lt;/div>
              &lt;button
                v-if="canDeleteComment(comment)"
                @click="handleDeleteComment(comment.id)"
                class="text-gray-500 hover:text-red-500"
              >
                &lt;i class="fas fa-trash-alt">&lt;/i>
              &lt;/button>
            &lt;/div>
            &lt;p class="mt-1">{{ comment.content }}&lt;/p>
          &lt;/div>
        &lt;/div>
      &lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/template>

&lt;script setup lang="ts">
import { ref } from 'vue'
import { useVideoStore } from '@/stores/video'
import { useUserStore } from '@/stores/user'
import { Toast } from '@kousum/semi-ui-vue'
import type { VideoComment } from '@/services/video/video.types'

const props = defineProps&lt;{
  videoId: number
}>()

const emit = defineEmits&lt;{
  (e: 'close'): void
}>()

const videoStore = useVideoStore()
const userStore = useUserStore()

const commentContent = ref('')
const submitting = ref(false)

// 提交评论
const handleSubmitComment = async () => {
  if (!commentContent.value.trim() || submitting.value) return

  try {
    submitting.value = true
    await videoStore.addComment(props.videoId, commentContent.value)
    commentContent.value = ''
    Toast.success('评论成功')
  } catch (error) {
    Toast.error('评论失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 删除评论
const handleDeleteComment = async (commentId: number) => {
  try {
    await videoStore.deleteComment(props.videoId, commentId.toString())
    Toast.success('删除成功')
  } catch (error) {
    Toast.error('删除失败，请重试')
  }
}

// 检查是否可以删除评论
const canDeleteComment = (comment: VideoComment) => {
  return userStore.userId === comment.author_id
}

// 格式化时间
const formatTime = (timestamp: string) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minute = 60 * 1000
  const hour = minute * 60
  const day = hour * 24

  if (diff < minute) {
    return '刚刚'
  } else if (diff < hour) {
    return `${Math.floor(diff / minute)}分钟前`
  } else if (diff < day) {
    return `${Math.floor(diff / hour)}小时前`
  } else if (diff < day * 30) {
    return `${Math.floor(diff / day)}天前`
  } else {
    return date.toLocaleDateString()
  }
}
&lt;/script>

&lt;style scoped>
.bg-primary {
  background-color: #ff2c55;
}
&lt;/style>
